import { Flex, Typography } from "antd";
import styles from "./FXBaoGaoCard.module.css";
import { formatOrderToIcon } from "./FXBaoGaoData";
import { useUser } from "@/hook/useUser/useUser";
import ProxyImage from "../Common/ProxyImage/ProxyImage";

const { Text, Link, Title } = Typography;

export default function FXBaoGaoCard({ item = {}, style = {} }) {
  const { openInNewWindow } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";

  return (
    <Flex
      className={styles["report-card"]}
      style={{
        ...style,
      }}
      gap={12}
      align="flex-start">
      {/* 序号展示（左侧） */}
      <Flex justify="center" align="center">
        <ProxyImage
          originalUrl={formatOrderToIcon[item.order]}
          style={{ width: "36px", height: "36px", objectFit: "cover" }}
        />
      </Flex>

      {/* 主要内容区域（右侧） */}
      <Flex vertical flex={1} style={{ overflow: "hidden" }}>
        <Link
          href={item.url}
          target={target}
          className={styles["report-link"]}
          key={item.url}>
          <Title className={styles["report-title"]}>{item.title}</Title>
        </Link>

        {/* </Text> */}

        {/* 底部元信息 */}
        <Flex
          justify="space-between"
          style={{ color: "#8c8c8c", fontSize: 13, marginTop: ".5rem" }}>
          <Text type="secondary">{item.extra_content?.created_at}</Text>
          {item.extra_content?.authors?.[0] && (
            <Link
              className={styles["author-link"]}
              href={item.extra_content?.authors[0].url}
              target={target}>
              {item.extra_content?.authors[0].name}
            </Link>
          )}
        </Flex>
      </Flex>
    </Flex>
  );
}
